<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MyBlog | 角色编辑</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../static/build/css/app.min.css" th:href="${#fn.getStaticFile('/build/css/app.min.css')}">
    <link rel="stylesheet" href="../../static/lib/plugins/ztree/css/metroStyle/metroStyle.css" type="text/css"  th:href="${#fn.getStaticFile('/lib/plugins/ztree/css/metroStyle/metroStyle.css')}"/>
    <link rel="stylesheet" href="../../static/dist/css/common.css" th:href="${#fn.getStaticFile('/dist/css/common.css')}">
    <script src="../../static/build/js/app.min.js" th:src="${#fn.getStaticFile('/build/js/app.min.js')}"></script>
    <script src="../../static/lib/plugins/ztree/js/jquery.ztree.core-3.5.min.js" type="text/javascript" th:src="${#fn.getStaticFile('/lib/plugins/ztree/js/jquery.ztree.core-3.5.min.js')}"></script>
    <script src="../../static/lib/plugins/ztree/js/jquery.ztree.all-3.5.min.js" type="text/javascript" th:src="${#fn.getStaticFile('/lib/plugins/ztree/js/jquery.ztree.all-3.5.min.js')}"></script>
    <script src="../../static/dist/js/common.js" th:src="${#fn.getStaticFile('/dist/js/common.js')}"></script>
    <script th:inline="javascript">
        $(document).ready(function () {
            var setting = {check: {enable: true}, data: {simpleData: {enable: true, pIdKey: "pid"}}};
            var zNodes = [[${permissionTree}]];
            var tree = $.fn.zTree.init($("#permissionTree"), setting, zNodes);
            $("#btnSubmit").click(function () {
                $("#btnSubmit").attr("disabled", true);
                var ids = [];
                var nodes = tree.getCheckedNodes(true);
                for (var i = 0; i < nodes.length; i++) {
                    if (!nodes[i].isParent) {
                        ids.push(nodes[i].id);
                    }
                }
                $("#permissionIds").val(ids);
                $("#roleForm").submit();
            });
            $("#roleForm").validate({
                rules:{
                    name: {remote: ctx +"sys/role/checkName?id=" +$("#id").val(),required:true},
                    code: {remote: ctx +"sys/role/checkCode?id=" +$("#id").val(),required:true}
                },
                messages: {
                    name: {required: "角色名称不能为空",remote:"角色名称已存在"},
                    code: {required: "角色编码不能为空",remote:"角色编码已存在"}
                },
                invalidHandler: function (form, validator) {
                    $("#btnSubmit").attr("disabled", false);
                }
            });
        });
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini " th:classappend="${#session.getAttribute('sidebarClass')}" th:with="pageCode='roleForm'">
    <div class="wrapper">
    <!-- Main Header -->
    <div th:replace="fragment/layout :: header"></div>
    <!-- Left side column. contains the logo and sidebar -->
    <div th:replace="fragment/layout :: menu(activePageCode=${pageCode})"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <!-- Nav tabs -->
            <ul th:replace="fragment/menuTab :: menuTab(activePageCode=${pageCode})"></ul>
            <div class="panel panel-info">
                <div th:if="${message!=null}"  th:class="'alert alert-'+${message.type}" th:text="${message.code}"></div>
                <div class="panel-body">
                    <div th:replace="fragment/validatorError :: validate(${bindingResult})"></div>
                    <form id="roleForm" th:action="@{/sys/role/save}" method="post" class="form-horizontal">
                        <input type="hidden" id="id" name="id" th:value="${role.id}"/>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="name">角色名称</label>
                            <div class="col-sm-6">
                                <input id="name" name="name" class="required form-control" th:value="${role.name}" autofocus />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="code">角色编码</label>
                            <div class="col-sm-6">
                                <input id="code" name="code" class="required form-control" th:value="${role.code}" autofocus/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-9 col-sm-offset-3">
                                <button type="button" class="btn btn-primary" id="btnSubmit">
                                    <span class="glyphicon glyphicon-ok"></span>保存
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="permissionIds">授权</label>
                            <div class="col-sm-6">
                                <div id="permissionTree" class="ztree"></div>
                                <input type="hidden" id="permissionIds" name="permissionIds"/>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <div th:replace="fragment/layout :: footer"></div>
</div>
</body>
</html>